<template>
	<view class="block">
		
		<navBar title="助力作品" bg="#FFF"></navBar>
		
		<view class="wheel flex_c" :style="`background: url(${$util.prefix('extension/wheel_bg.png')}) 0 0 no-repeat;`">
		
			<view class="notice flex_r_around">
				<u-notice-bar color="#FFFFFF" bgColor="transparent" :text="notice" direction="column"></u-notice-bar>
			</view>
		
			<view class="luckwheel">
				<LuckyWheel :blocks="blocks" :prizes="prizes" :buttons="buttons" ref="LuckDraw" @start="startCallBack(1)"
					@end="endCallBack" :default-config="defaultConfig" />
			</view>
		
			<view class="start_btn flex_r_between">
				<image :src="$util.prefix('extension/btn_start1.png')" @click="startCallBack(1)"></image>
				<image :src="$util.prefix('extension/btn_start10.png')" @click="startCallBack(10)"></image>
				<image :src="$util.prefix('extension/btn_start50.png')" @click="startCallBack(50)"></image>
			</view>
		
		
			<view class="tab_content">
		
				<view class="rich">
					<view class="title">
						本活动主旨
					</view>
					<view class="text">
						（1）激励想做内容主播的用户推广自己的动态，直播间等方式方式积累平台人气和粉丝数量，成为平台达人主播。从而实现本平台不同领域的内容丰富发展，满足超圈和用户需求。
					</view>
					<view class="text">
						（2）参与活动，抽奖所得的购物卡及虚拟礼物只能在超圈消费和购物，严禁参与套现等违法活动。
					</view>
					<br />
					<view class="title">
						活动规则
					</view>
					<view class="text">
						（1）凡在超圈消费推广自己名片，动态，直播间。超圈将免费赠送平台购物卡，虚拟礼品等。赠送的购物卡不能提现，只能在超圈进行购物等消费。礼物不能兑现只能用于打赏娱乐。
					</view>
					<view class="text">
						（2）赠送方式：赠送的方式为抽奖，用户每消费一笔，抽一次奖。消费金额越大中大奖概率越大。
					</view>
				</view>
		
			</view>
		
			<view class="loading flex_c" v-if="!loaded">
				<HevuLoading type="loading2" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
					loadingIconColor="#FD2A53" />
		
				<view style="height: 60rpx;"></view>
				<ProgressBar :Width="percent" Type="candy"></ProgressBar>
			</view>
		
			<view class="list_btn flex_r_around" @click="$util.toUrl('/pages/extension/wheelList')">
				<text>中奖记录</text>
			</view>
		
			<wLoading ref="loading"></wLoading>
		
			<view @touchmove.stop.prevent="preventHandler">
				<u-popup :show="model" @close="model = false" mode="center" bgColor="transparent"
					:safeAreaInsetBottom="false">
					<view class="success flex_c">
		
						<image class="title" :src="$util.prefix('extension/wheel_success_title.png')" mode="aspectFill">
						</image>
		
						<view class="grid">
							<u-grid :border="false" :col="getCol()">
								<u-grid-item v-for="(item,index) in success_list" :key="index">
									<view class="item flex_c">
										<image :src="item.img" mode="widthFix"></image>
										<view class="price flex_center">
											<i>×</i>
											<text>{{ item.num }}</text>
										</view>
									</view>
								</u-grid-item>
							</u-grid>
						</view>
		
						<view class="all_price">
							总计: {{ all_price }}金币
						</view>
		
		
						<view class="btn" @click="model = false">开心收下</view>
					</view>
				</u-popup>
			</view>
		
		</view>
	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import navBar from '@/compentents/navBar/navBar.vue'
	export default {
		data() {
			return {
				notice: [],

				defaultConfig: {
					gutter: '0',
					speed: 10,
					accelerationTime: 3000,
					decelerationTime: 3000,
				},

				buttons: [{
					radius: '30px',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
						width: "160%",
						top: '-160%'
					}],
					fonts: [{
							text: '参与推广',
							top: '-40%',
							fontSize: 10,
							fontColor: '#C633B3',
						},
						{
							text: '获取次数',
							top: '10%',
							fontSize: 10,
							fontColor: '#C633B3',
						},
					]
				}],

				blocks: [{
					padding: '16px',
					background: '#DCDBDA',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
						width: "100%",
					}],
				}, ],

				prizes: [],
				prizeList: [],


				// 剩余次数
				haveNum: 0,
				// 防连点
				isable: true,

				// 图片预加载 数组
				load_image: [
					// 总背景
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_bg.png',
					// 转盘背景
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
					// 抽奖按钮(指针)
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
					// 按钮
					'https://qiniu-cdn.maeiyun.com//h5static/extension/btn_start1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/extension/btn_start10.png',
					'https://qiniu-cdn.maeiyun.com//h5static/extension/btn_start50.png',
					// 弹窗
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_success_title.png',
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				tab: 1,

				model: false,

				success_list: [],
				all_price: 0,
			}
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},

			haveNum: function(val, old) {
				if (this.haveNum == 0) {
					this.buttons[0].fonts[0].text = `参与推广`;
					this.buttons[0].fonts[1].text = `获取次数`;
				} else {
					this.buttons[0].fonts[0].text = `剩余${this.haveNum}次`;
					this.buttons[0].fonts[1].text = `抽奖`;
				}
			},
		},

		components: {
			LuckyWheel,
			HevuLoading,
			ProgressBar,
			wLoading,
			navBar,
		},

		methods: {
			
			getCol() {
				if (this.success_list.length == 1) {
					return 1;
				} else if (this.success_list.length <= 4 && this.success_list.length > 1) {
					return 2;
				} else {
					return 4;
				}
			},

			getNotice() {
				this.$get('/active.trafficPrizeV2/getPrizeLog', {
					page: 1,
					limit: 100
				}).then(res => {
					res.data.data.forEach(element => {
						this.notice.push(`${element.nickname}获得了${element.prize_name}`);
					});
				});
			},

			setInit() {
				for (var i = 0; i < this.prizeList.length; i++) {
					var element = this.prizeList[i];
					this.prizes.push({
						id: element.id,
						name: element.name,
						fonts: [{
							text: `${element.name}`,
							top: '14%',
							fontColor: '#A53BFF',
							fontSize: 12,
						}],
						imgs: [{
							src: element.img,
							width: '36%',
							top: '36%'
						}],
						background: i % 2 == 0 ? '#F2E5FF' : '#FFF'
						// background: '#FE5072'
					});
				}
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}

			},

			onTab(e) {
				this.tab = e;
			},

			startCallBack(num) {

				if (this.haveNum == 0) {
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0
						});
					});
					return this.$util.msg('没有剩余抽奖次数了哦，参与推广可以获得抽奖次数')
				}

				// 开始旋转
				if (!this.isable) {
					return;
				}
				this.isable = false;
				this.$refs.loading.open();
				this.$post('/active.trafficPrizeV2/setPrize', {
					num: num
				}, true, () => {
					this.isable = true;
					this.$refs.loading.close();
				}).then(res => {
					this.$refs.loading.close();
					this.success_list = res.data.prize_list;
					this.getAllPrice();
					this.$refs.LuckDraw.play();
					// 模拟请求接口2s后返回数据
					setTimeout(() => {
						const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[
							0].id);
						// 得到中奖索引, 开始缓慢停止
						this.$refs.LuckDraw.stop(index);
					}, 2000);
				})

			},

			endCallBack(prize) {
				this.open();
				this.getInit();
			},

			getInit() {
				this.$post('/active.trafficPrizeV2/getInitInfo').then(res => {
					this.haveNum = res.data.haveNum;
					this.isable = true;
					this.$refs.loading.close();
					this.prizeList = res.data.prizeList;
					if (!this.prizes.length) {
						this.setInit();
					}
				});
			},

			open() {
				this.model = true;
			},

			preventHandler() {
				return;
			},

			getAllPrice() {
				var price = 0;
				this.success_list.forEach(element => {
					var item_price = element.num * element.rmb_price
					price += item_price;
				});
				this.all_price = price * 10;
			},
		
		},

		created() {
			this.getNotice();
			this.preLoad();
			this.getInit();
		}
	}
</script>

<style lang="less" scoped>
	.wheel {
		width: 100vw;
		border-radius: 40rpx;
		background-size: 100% !important;
		padding-bottom: 40rpx;
		background-color: #6DC1FF !important;
	}

	.list_btn {
		padding: 280rpx 0 20rpx 20rpx;
		position: absolute;
		top: 200rpx;
		right: 0;
		z-index: 10;

		text {
			width: 44rpx;
			background: linear-gradient(117deg, #C1AEFF 0%, #247FFF 100%);
			border-radius: 24rpx 0rpx 0rpx 24rpx;
			padding: 12rpx 0;
			font-size: 24rpx;
			color: #FFF;
			line-height: 26rpx;
			text-align: center;
		}
	}

	.notice {
		width: 560rpx;
		height: 66rpx;
		background: linear-gradient(90deg, #390FF8 0%, #3C79FD 100%);
		border-radius: 40rpx;
		border: 1rpx solid #FFF;
		box-shadow: 0 8rpx 0 0px #390FF8;
		margin: 260rpx 0 64rpx;

		/deep/ .u-notice-bar {
			padding: 10rpx 36rpx;
		}
	}

	.start_btn {
		width: 100%;
		padding: 24rpx 48rpx 24rpx;

		image {
			width: 200rpx;
			height: 108rpx;
		}
	}

	.loading {
		position: fixed;
		z-index: 30;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		padding-top: 20vh;
	}

	.tab_content {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 82rpx 44rpx 62rpx;
		margin-top: 60rpx;
		position: relative;

		.tab {
			position: absolute;
			width: 686rpx;
			top: -48rpx;
			left: 0;
			padding: 0 46rpx;

			.item {
				width: 288rpx;
				height: 96rpx;

				image {
					width: 288rpx;
					height: 96rpx;
				}

			}
		}
	}

	.card {
		background: hsla(224, 98%, 61%, 0.5);
		border-radius: 24rpx;
		opacity: 0.5;
		padding: 28rpx 0 26rpx;

		text {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
		}

		view {
			margin-top: 8rpx;
			font-weight: 600;
			font-size: 56rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}

	}

	.rich {
		.title {
			margin-bottom: 8rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #6B0217;
			line-height: 48rpx;
		}

		.text {
			font-size: 28rpx;
			color: #6B0217;
			line-height: 48rpx;
		}
	}

	.success {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 56rpx 54rpx 50rpx;

		.title {
			width: 324rpx;
			height: 32rpx;
			margin-bottom: 60rpx;
		}

		.grid {
			width: 100%;

			/deep/ .u-grid-item--hover-class {
				opacity: 1;
			}

			.item {
				width: 100%;

				.price {
					align-items: flex-end;
					padding: 8rpx 0 26rpx;
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
					}
					
					i {
						font-weight: 600;
						font-size: 24rpx;
						color: #131313;
						font-style: normal;
					}
				}

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}
		}

		.all_price {
			font-size: 28rpx;
			color: #7B7690;
			line-height: 40rpx;
			padding: 20rpx 0 40rpx;
		}

		.btn {
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #4542FF 0%, #9F64FA 100%);
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFBDC;
			line-height: 96rpx;
			text-align: center;
		}
	}
</style>